<script setup lang="ts">
definePage({
  name: 'demo-aftereach',
  style: {
    navigationBarTitleText: 'afterEach 钩子演示',
  },
})

const router = useRouter()

function goBack() {
  router.back()
}
</script>

<template>
  <view class="page-wrapper">
    <!-- 头部 -->
    <view class="header-container">
      <view class="header-content">
        <view class="header-icon">
          📊
        </view>
        <view class="header-title">
          afterEach 钩子演示
        </view>
        <view class="header-subtitle">
          这个页面用于演示 afterEach 钩子的触发
        </view>
      </view>
    </view>

    <!-- 内容 -->
    <demo-block title="afterEach 演示成功" transparent>
      <view class="success-message">
        <view class="success-title">
          🎉 恭喜！
        </view>
        <view class="success-text">
          如果你能看到这个页面，说明 afterEach 钩子已经触发了！<br><br>

          打开浏览器控制台（F12 → Console）可以看到相关的日志输出。<br><br>

          afterEach 钩子常用于页面统计、埋点上报等导航后处理。
        </view>
      </view>
    </demo-block>

    <!-- 操作按钮 -->
    <demo-block title="导航" transparent>
      <wd-button type="warning" block @click="goBack">
        返回上一页
      </wd-button>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-wrapper {
  min-height: 100vh;
  padding: 12px 0;
  background-color: #f7f7f7;
}

.dark .page-wrapper {
  background-color: var(--wot-dark-background);
}

.header-container {
  margin: 0 12px 12px;
}

.header-content {
  padding: 24px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.dark .header-content {
  background-color: var(--wot-dark-background2);
}

.header-icon {
  margin-bottom: 12px;
  font-size: 32px;
}

.header-title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.dark .header-title {
  color: var(--wot-dark-color);
}

.header-subtitle {
  font-size: 14px;
  color: #666;
}

.dark .header-subtitle {
  color: var(--wot-dark-color2);
}

.success-message {
  padding: 16px;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}

.dark .success-message {
  background-color: rgba(16, 185, 129, 0.2);
}

.success-title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #15803d;
}

.dark .success-title {
  color: #6ee7b7;
}

.success-text {
  font-size: 14px;
  line-height: 1.6;
  color: #16a34a;
}

.dark .success-text {
  color: #a7f3d0;
}
</style>
